<template>
	<div class="hello g-doc" >
	 <div id="container" :class="{con_show:con_show}">
		<div class="header">概况</div>
		<div class="data_box loading-warp">
			<div class="datda_box_top clearfix">
				<div class="data_box_title">总览数据</div>
				<ul class="data">
					<li class="data_new lfloat">
						<p v-text="dayNum"></p>
						<span>今日新单</span></li>
					<li class="data_count lfloat">
						<p v-html="agent_num">{{agent_num}}</p> <span>车商总数</span></li>
					<li class="data_counts lfloat">
						<p v-html="all">{{all}}</p> <span>订单总数</span></li>
				</ul>
			</div>
			<div class="data_box_center"></div>
			<div class="data_box_bot clearfix">
				<div class="data_box_title">实时状态数据</div>
				<ul class="data_commit clearfix">
					<li class="data_new_tj lfloat">
						<p>{{dtjNum}}</p> <span>待提交</span></li>
					<li class="data_count_cs lfloat">
						<p>{{dcsNum}}</p> <span>待初审</span></li>
					<li class="data_counts_bzl lfloat">
						<p>{{dbqzlNum}}</p> <span>待补全资料</span></li>
				</ul>
				<ul class="data_bank clearfix">
					<li class="data_new_sh lfloat">
						<p>{{dyhshNum}}</p> <span>待银行审核</span></li>
					<li class="data_count_zs lfloat">
						<p>{{dzsNum}}</p> <span>待终审</span></li>
					<li class="data_counts_wb lfloat">
						<p>{{zswbNum}}</p> <span>终审完毕</span></li>
				</ul>
			</div>
			<div>
				<div class="clearfix business_data">
					<div class="data_box_title">商家数据</div>
					<ul class="data_b clearfix">
						<li class="data_in lfloat">
							<p>{{jjl}}</p> <span>进件总量</span></li>
						<li class="data_pass lfloat">
							<p>{{zstg}}</p> <span>征审通过总量</span></li>
						<li class="data_inter lfloat">
							<p>{{mq}}</p> <span>面签总量</span></li>
						<li class="data_spass lfloat">
							<p>{{sptg}}</p> <span>审批通过总量</span></li>
					</ul>
				</div>
				<div class="data_box_center"></div>
				<div class="view_data">
					<a href="javascript:void(0);" @click="tabel_show();">查看商家数据详情</a> <i></i></div>
			</div>
		</div>
		<!--底部-->
		<footer>
			<div class="footer_bar clearfix">
				<!--<a href="javascript:void(0);" class="homec"></a>-->
				<router-link to="/home" class="homec"></router-link>
				<router-link to="/order_list" class="dingdan"></router-link>
				<router-link to="/busin_list" class="cheshang"></router-link>
				<router-link to="/me" class="geren"></router-link>
				<!--<a href="./order.html" class="dingdan"></a>-->
				<!--<a href="./car_dealer.html" class="cheshang"></a>
				<a href="./user.html " class="geren"></a>-->
			</div>
		</footer>
		
		<!--loadding-->
		<div class="loading" :class="{loading_show:l_show}">
			<div class="loading_box">
				<img src="/static/img/0.gif" alt="loading">
			</div></div>
		</div>
		<!--商家数据-->
	<div class="tabel_bar" :class="{show:is_show}">
	<div class="data_title"><i class="back_index lfloat" @click="hide_table();"></i>商家数据</div>
	<div class="tabel_t">
		<ul class="data_b clearfix">
			<li class="data_in lfloat">
				<p>{{jjl}}</p> <span>进件总量</span></li>
			<li class="data_pass lfloat">
				<p>{{zstg}}</p> <span>征审通过总量</span></li>
			<li class="data_inter lfloat">
				<p>{{mq}}</p> <span>面签总量</span></li>
			<li class="data_spass lfloat">
				<p>{{sptg}}</p> <span>审批通过总量</span></li>
		</ul>
	</div>
	<div class="data_box_center"></div>
	<table>
		<thead>
			<tr>
				<th>#</th>
				<th>车商名</th>
				<th>进件量</th>
				<th>征审通过量</th>
				<th>面签量</th>
				<th>审批通过量</th>
			</tr>
		</thead>
		<tbody class="thead" v-for="(item,index) in table_list">
			<tr>
				<td>{{index+1}}</td>
				<td class="company">{{item.name}}</td>
				<td>{{item.jjl}}</td>
				<td>{{item.zstg}}</td>
				<td>{{item.mq}}</td>
				<td>{{item.sptg}}</td>
			</tr>
		</tbody>
	</table>
	<div class="load_more">-没有更多了-</div>
</div>
	</div>
	
</template>

<script>
	import sha1 from '../../static/js/sha/sha1'
	import common from '../../static/js/common'
	import axios from 'axios'
	import foot from '@/components/foot'
	//	模拟接口数据
var Mock = require('mockjs');
var data = Mock.mock('nidaye',{
	"code":200,
	"message":"成功！",
	"data":{
		"agent_num|1-10":1,
		"all|1-100":2,
		"dayNum|1-100":3,
		"dbqzlNum|1-100":4,
		"dcsNum|1-100":5,
		"dtjNum|1-100":6,
		"dyhshNum|1-100":6,
		"dzsNum|1-100":7,
		"jjl|1-100":8,
		"monthNum|1-100":9,
		"mq|1-100":10,
		"num|1-100":11,
		"sptg|1-100":12,
		"team|1-100":13,
		"wc|1-100":14,
		"weekNum|1-100":15,
		"zstg|1-100":16,
		"zswbNum|1-100":17
	}
})
var data1 = Mock.mock('table',{
	"code":200,
	"message":"表格成功！00000",
	"data":[
	{"jjl|1-100":1,"zstg|1-100":2,"mq|1-100":3,"wc|1-100":4,"sptg|1-100":5,"all|1-100":6,"dzsNum|1-100":7,"dbqzlNum|1-100":8,"dcsNum|1-100":9,"dtjNum|1-100":10,"dyhshNum|1-100":11,"name":"张三的公司"},
	{"jjl|1-100":1,"zstg|1-100":2,"mq|1-100":3,"wc|1-100":4,"sptg|1-100":5,"all|1-100":6,"dzsNum|1-100":7,"dbqzlNum|1-100":8,"dcsNum|1-100":9,"dtjNum|1-100":10,"dyhshNum|1-100":11,"name":"李四的公司"},
	{"jjl|1-100":1,"zstg|1-100":2,"mq|1-100":3,"wc|1-100":4,"sptg|1-100":5,"all|1-100":6,"dzsNum|1-100":7,"dbqzlNum|1-100":8,"dcsNum|1-100":9,"dtjNum|1-100":10,"dyhshNum|1-100":11,"name":"王五的公司"},
	{"jjl|1-100":1,"zstg|1-100":2,"mq|1-100":3,"wc|1-100":4,"sptg|1-100":5,"all|1-100":6,"dzsNum|1-100":7,"dbqzlNum|1-100":8,"dcsNum|1-100":9,"dtjNum|1-100":10,"dyhshNum|1-100":11,"name":"facebook的公司"}]

})
export default {
	name:'home',
	data() {
		return {
		dayNum:"",
		agent_num:"",
		all:"",
		dtjNum:"",
		dcsNum:"",
		dbqzlNum:"",
		dyhshNum:"",
		dzsNum:"",
		zswbNum:"",
		jjl:"",
		zstg:"",
		mq:"",
		sptg:"",
		is_show:false,
		con_show:false,
		"table_list":[],
		l_show:true
		}
	},
	components:{foot},
	methods: {
		getData() {
			document.title = '首页';
//			请求数据
			var that=this;
			axios.get('nidaye')
				.then(function(res) {
					var data=res.data;
//					console.log(res);
					if(data.code==200){
						that.l_show=false;
						that.dayNum=data.data.dayNum;//今日新单
						that.agent_num=data.data.agent_num;//车商总数
						that.all=data.data.all;//订单总数
						that.dtjNum=data.data.dtjNum;//待提交
						that.dcsNum=data.data.dcsNum;//待初审
						that.dbqzlNum=data.data.dbqzlNum;//待补全资料
						that.dyhshNum=data.data.dyhshNum;//待银行审核
						that.dzsNum=data.data.dzsNum;//待终审
						that.zswbNum=data.data.zswbNum;//终审完毕
						that.jjl=data.data.jjl;//进件总量
						that.zstg=data.data.zstg;//征审通过
						that.mq=data.data.mq;//面签
						that.sptg=data.data.sptg;//审批通过
}
					
				});
		return this;

		},
		tabel_show(){
			this.is_show=!this.is_show;
			this.con_show=!this.con_show;
//			console.log(this.con_show);
			this.get_tableData();
			return this;
		},
		hide_table(){
			this.is_show=!this.is_show;
			this.con_show=!this.con_show;
			return this;
		},
		get_tableData(){
			var that=this;
			axios.get('table')
				.then(function(res) {
					var data=res.data;
//					console.log(res);
					if(data.code==200){
						that.table_list=data.data;
//						console.log(that.table_list);
}
					
				});
		},
		is_Login(){
			//检查是否登录
			var token=window.localStorage.getItem("token");
			if(!token){
			this.$router.push({
			name:"login",path: '/login'
	});
			}else{
				return false;
			}
			return this;
		}
	},
	mounted() {
		this.getData().is_Login();
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../../static/css/index.css';
	/*@import '../../static/css/common.css';*/
	.header {
		height: 0.88rem;
		line-height: 0.88rem;
		text-align: center;
		font-size: 0.36rem;
		color: #fff;
		background: url(../../static/img/header_bar.png) center center;
		background-size: 100%;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 9;
	}
	.con_show{
		display: none;
	}
</style>